<template>
	<view class="page-container">
		<!-- 页面标题 -->
		<view class="page-title">日期范围选择</view>

		<!-- 选择结果展示 -->
		<view class="selection-result">
			<text class="result-label">已选范围：</text>
			<text class="result-value" v-if="dateRange.startDate">
				{{ formatDisplayDate(dateRange.startDate) }}
				<text v-if="dateRange.endDate">至 {{ formatDisplayDate(dateRange.endDate) }}</text>
			</text>
			<text class="result-placeholder" v-else>请选择入住日期和离店日期</text>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<button class="reset-btn" @click="resetSelection">重置</button>
			<button class="confirm-btn" @click="confirmSelection" :disabled="!isSelectionComplete">
				确认选择
			</button>
		</view>

		<!-- 内嵌式日历组件（不使用弹框） -->
		<view class="calendar-container">
			<uni-calendar ref="calendarRef" :insert="true" :show="true" :lunar="false" :range="true" month-num="3"
				:start-date="minDate" :end-date="maxDate" :border="true" :highlight="true" @change="handleDateChange" />
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import uniCalendar from '@dcloudio/uni-ui/lib/uni-calendar/uni-calendar.vue'
	import {
		calculateStayNights
	} from '../../utils'
	// 日期范围数据
	const dateRange = ref({
		startDate: '',
		endDate: ''
	})
	const query = defineProps({
		type: '',
		params: ''
	})
	// 格式化日期为 yyyy-MM-dd (组件要求的格式)
	const formatDate = (date) => {
		const year = date.getFullYear()
		const month = String(date.getMonth() + 1).padStart(2, '0')
		const day = String(date.getDate()).padStart(2, '0')
		return `${year}-${month}-${day}`
	}

	// 格式化显示日期为 yyyy年MM月dd日
	const formatDisplayDate = (dateStr) => {
		if (!dateStr) return ''
		const [year, month, day] = dateStr.split('-')
		return `${year}年${month}月${day}日`
	}

	// 最小日期（今天）
	const minDate = computed(() => formatDate(new Date()))

	// 最大日期（6个月后）
	const maxDate = computed(() => {
		const future = new Date()
		future.setMonth(future.getMonth() + 6)
		return formatDate(future)
	})

	// 判断选择是否完成（同时有开始和结束日期）
	const isSelectionComplete = computed(() => {
		return !!dateRange.value.startDate && !!dateRange.value.endDate
	})

	// 处理日期选择变化
	const handleDateChange = (e) => {
		console.log(e)
		console.log(e.range.before)
		// if(e.range.before<)
		if (e.range.after < e.range.before) {
			dateRange.value.startDate = e.range.after
			dateRange.value.endDate = e.range.before
		} else {
			dateRange.value.startDate = e.range.before
			dateRange.value.endDate = e.range.after
		}
	}

	// 重置选择
	const resetSelection = () => {
		dateRange.value = {
			startDate: '',
			endDate: ''
		}
		// 重置日历选中状态（需要调用组件方法）
		const calendar = uniCalendar.refs.calendarRef
		if (calendar && calendar.clear) {
			calendar.clear()
		}
	}

	// 确认选择
	const confirmSelection = () => {
		if (isSelectionComplete.value) {
			const nights = calculateStayNights(dateRange.value.startDate, dateRange.value.endDate)
			if (nights <= 0) {
				return uni.showToast({
					title: '入住时间不足一晚！请重新选择！',
					icon: 'none'
				})
			}
			const Params = uni.getStorageSync('homeParams')
			uni.setStorageSync('homeParams', {
				...Params,
				CheckIn: dateRange.value.startDate,
				CheckOut: dateRange.value.endDate,
			})
			if (query.type) {
				const params = JSON.parse(query.params)
				params.CheckIn = dateRange.value.startDate
				params.CheckOut = dateRange.value.endDate
				console.log(params)
				uni.navigateTo({
					url: '/pages/hotel/list?params=' + JSON.stringify(params)
				})
			} else {
				uni.switchTab({
					url: '/pages/home/index'
				})
			}
		}
	}

	// 判断是否为跨月选择
	const isCrossMonth = (start, end) => {
		if (!start || !end) return false
		const startDate = new Date(start)
		const endDate = new Date(end)
		return startDate.getMonth() !== endDate.getMonth() ||
			startDate.getFullYear() !== endDate.getFullYear()
	}
</script>

<style scoped>
	.page-container {
		padding: 16px;
		background-color: #f5f5f7;
		min-height: 100vh;
	}

	.page-title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 20px;
		color: #333;
	}

	.selection-result {
		padding: 14px;
		background-color: #fff;
		border-radius: 10px;
		margin-bottom: 16px;
		display: flex;
		align-items: center;
	}

	.result-label {
		color: #666;
		font-size: 15px;
	}

	.result-value {
		color: #007aff;
		font-size: 15px;
		margin-left: 8px;
		flex: 1;
	}

	.result-placeholder {
		color: #999;
		font-size: 15px;
		margin-left: 8px;
		flex: 1;
	}

	.action-buttons {
		display: flex;
		gap: 12px;
		margin-bottom: 20px;
	}

	.reset-btn {
		flex: 1;
		background-color: #fff;
		color: #666;
		border: 1px solid #eee;
	}

	.confirm-btn {
		flex: 1;
		background-color: #007aff;
		color: #fff;
	}

	.confirm-btn:disabled {
		background-color: #b3d4fc;
	}

	.calendar-container {
		background-color: #fff;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		margin-bottom: 20px;
	}

	.selection-tips {
		padding: 12px;
		background-color: #e8f4fd;
		border-radius: 8px;
		display: flex;
		align-items: center;
		font-size: 14px;
	}

	.tips-icon {
		margin-right: 8px;
		font-size: 16px;
	}

	.tips-text {
		color: #0066cc;
	}
</style>